<template>
  <div class="login">
    <el-form
      autoComplete="on"
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      label-position="left"
      label-width="0px"
      class="login-form">
      <div class="logo-wrap">
        <router-link :to="{name: 'home'}" class="logo inline-block">
          <img src="../assets/images/logo.png"/>
        </router-link>
      </div>
      <el-form-item prop="username">
        <span class="icon-container">
          <i class="icon iconfont icon-user"></i>
        </span>
        <el-input
          name="username"
          type="text"
          v-model="loginForm.username"
          autoComplete="on"
          placeholder="用户名"/>
      </el-form-item>

      <el-form-item prop="password">
        <span class="icon-container">
          <i class="icon iconfont icon-password"></i>
        </span>
        <el-input
          name="password"
          :type="pwdType"
          v-model="loginForm.password"
          autoComplete="on"
          placeholder="密码"
          class="pwd-input"
          @keyup.enter.native="handleLogin()"/>
          <span class="toggle-pwd-type" @click="togglePwdType">
            <i class="icon iconfont pointer" :class="pwdType === 'password' ? 'icon-eye-off' : 'icon-eye-on'"></i>
          </span>
      </el-form-item>

      <el-button
        type="primary"
        class="submit-btn"
        :loading="loading"
        @click.native.prevent="handleLogin">
        登录
      </el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('用户名不能为空'))
      } else if (value.length > 10 || value.length < 5) {
        callback(new Error('用户名 5-10 个字符'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('密码不能为空'))
      } else if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      pwdType: 'password',
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ validator: validateUsername, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 登录逻辑
          this.$router.push({ name: 'home' })
        } else {
          console.log('error submit')
          return false
        }
      })
    },
    // 显示隐藏密码
    togglePwdType () {
      this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../assets/css/variables.scss';
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 20px;
  background-color: #fdfdfd;
  background: url('../assets/images/login-bg.png') repeat-x;
  background-position: center bottom;
}
.logo-wrap {
  text-align: center;
  margin-bottom: 60px;
}
.logo {
  img {
    width: 190px;
    height: 52px;
  }
}
.login-form {
  width: 400px;
  margin: auto;
  padding-top: 220px;
  .title {
    font-size: 18px;
    padding: 30px 0;
    text-align: center;
  }
  .el-form-item {
    margin-bottom: 32px;
  }
  .icon-container {
    position: absolute;
    left: 14px;
    top: 0;
    z-index: 5;
    bottom: 0;
    margin: auto;
    color: #8d9699;
    .icon-user {
      font-size: 22px;
    }
    .icon-password {
      font-size: 21px;
    }
  }
  .toggle-pwd-type {
    position: absolute;
    right: 14px;
    top: 3px;
  }
  .submit-btn {
    margin-top: 4px;
    width: 100%;
    padding: 14.7px 20px;
    font-size: 18px;
    font-weight: 400;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.login-form {
  .el-input__inner {
    padding: 0 45px;
    height: 45px;
    line-height: 45px;
  }
  .pwd-input {
    .el-input__inner {
      padding-right: 55px;
    }
  }
  .submit-btn {
    padding: 12px 20px;
  }
  .el-input__inner {
    border-color: #dadadb !important;
    &:focus {
      border-color: #409eff !important;
    }
  }
}
</style>
